$(function() {

    // the element we want to apply the jScrollPane
    var $el					= $('#jp-container').jScrollPane({
            verticalGutter 	: -16
        }),

        // the extension functions and options
        extensionPlugin 	= {

            extPluginOpts	: {
                // speed for the fadeOut animation
                mouseLeaveFadeSpeed	: 500,
                // scrollbar fades out after hovertimeout_t milliseconds
                hovertimeout_t		: 1000,
                // if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
                // if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
                // also, it will be shown when we start to scroll and hidden when stopping
                useTimeout			: false,
                // the extension only applies for devices with width > deviceWidth
                deviceWidth			: 980
            },
            hovertimeout	: null, // timeout to hide the scrollbar
            isScrollbarHover: false,// true if the mouse is over the scrollbar
            elementtimeout	: null,	// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
            isScrolling		: false,// true if scrolling
            addHoverFunc	: function() {

                // run only if the window has a width bigger than deviceWidth
                if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;

                var instance		= this;

                // functions to show / hide the scrollbar
                $.fn.jspmouseenter 	= $.fn.show;
                $.fn.jspmouseleave 	= $.fn.fadeOut;

                // hide the jScrollPane vertical bar
                var $vBar			= this.getContentPane().siblings('.jspVerticalBar').hide();

                /*
                 * mouseenter / mouseleave events on the main element
                 * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
                 */
                $el.bind('mouseenter.jsp',function() {

                    // show the scrollbar
                    $vBar.stop( true, true ).jspmouseenter();

                    if( !instance.extPluginOpts.useTimeout ) return false;

                    // hide the scrollbar after hovertimeout_t ms
                    clearTimeout( instance.hovertimeout );
                    instance.hovertimeout 	= setTimeout(function() {
                        // if scrolling at the moment don't hide it
                        if( !instance.isScrolling )
                            $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                    }, instance.extPluginOpts.hovertimeout_t );


                }).bind('mouseleave.jsp',function() {

                    // hide the scrollbar
                    if( !instance.extPluginOpts.useTimeout )
                        $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                    else {
                        clearTimeout( instance.elementtimeout );
                        if( !instance.isScrolling )
                            $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                    }

                });

                if( this.extPluginOpts.useTimeout ) {

                    $el.bind('scrollstart.jsp', function() {

                        // when scrolling show the scrollbar
                        clearTimeout( instance.hovertimeout );
                        instance.isScrolling	= true;
                        $vBar.stop( true, true ).jspmouseenter();

                    }).bind('scrollstop.jsp', function() {

                        // when stop scrolling hide the scrollbar (if not hovering it at the moment)
                        clearTimeout( instance.hovertimeout );
                        instance.isScrolling	= false;
                        instance.hovertimeout 	= setTimeout(function() {
                            if( !instance.isScrollbarHover )
                                $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                        }, instance.extPluginOpts.hovertimeout_t );

                    });

                    // wrap the scrollbar
                    // we need this to be able to add the mouseenter / mouseleave events to the scrollbar
                    var $vBarWrapper	= $('<div/>').css({
                        position	: 'absolute',
                        left		: $vBar.css('left'),
                        top			: $vBar.css('top'),
                        right		: $vBar.css('right'),
                        bottom		: $vBar.css('bottom'),
                        width		: $vBar.width(),
                        height		: $vBar.height()
                    }).bind('mouseenter.jsp',function() {

                        clearTimeout( instance.hovertimeout );
                        clearTimeout( instance.elementtimeout );

                        instance.isScrollbarHover	= true;

                        // show the scrollbar after 100 ms.
                        // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
                        instance.elementtimeout	= setTimeout(function() {
                            $vBar.stop( true, true ).jspmouseenter();
                        }, 100 );

                    }).bind('mouseleave.jsp',function() {

                        // hide the scrollbar after hovertimeout_t
                        clearTimeout( instance.hovertimeout );
                        instance.isScrollbarHover	= false;
                        instance.hovertimeout = setTimeout(function() {
                            // if scrolling at the moment don't hide it
                            if( !instance.isScrolling )
                                $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                        }, instance.extPluginOpts.hovertimeout_t );

                    });

                    $vBar.wrap( $vBarWrapper );

                }

            }

        },

        // the jScrollPane instance
        jspapi 			= $el.data('jsp');

    // extend the jScollPane by merging
    $.extend( true, jspapi, extensionPlugin );
    jspapi.addHoverFunc();

});